<template>
  <!--<transition name="slide-fade">
  </transition>-->
  <div id="app">
      <keep-alive> <!--缓存路由组件对象-->
        <router-view/>
      </keep-alive>
    <footer-guide v-show="$route.meta.showFooter"/><!--与路由Index,js中meta相对应-->
  </div>
</template>

<script>
import FooterGuide from './components/footer/FooterGuide'
import FadeAnimation from './components/fade/Fade'
import {mapActions} from 'vuex'
export default {
  name: 'App',
  components: {
    FadeAnimation,
    FooterGuide
  },
  mounted () {
    // this.$store.dispatch('getAddress')
    this.getAddress()
    this.getUserInfo()
  },
  methods: {
    ...mapActions(['getAddress', 'getUserInfo'])
  }
}
</script>

<style lang="stylus" >
  #app, body ,html
    width 100%
    height 100%
    background #f5f5f5
  .slide-fade{
    position: absolute;left:0;right: 0;
  }
  .slide-fade-enter, .slide-fade-leave-to {
    left:0;right: 0;
    transform: translateX(8px);
    opacity: 0;
  }
  .slide-fade-enter-active {
    transition: all 1.8s ease;
  }
  .slide-fade-leave-active {
    transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
  }
</style>
